/* =====================================================================
   DIAMOND SOCIAL — Visual Refresh
   Sngine-safe skin: CSS-first, no data attributes or JS contracts changed.
   Loaded after the stock/custom stylesheet so existing functionality wins.
   ===================================================================== */
:root {
  --ds-primary: #2563eb;
  --ds-primary-2: #4f46e5;
  --ds-accent: #06b6d4;
  --ds-ink: #172033;
  --ds-muted: #667085;
  --ds-bg: #f5f7fb;
  --ds-card: #ffffff;
  --ds-line: #e7ebf3;
  --ds-soft: #eef4ff;
  --ds-shadow: 0 8px 28px rgba(31, 45, 75, .08);
  --ds-shadow-sm: 0 3px 14px rgba(31, 45, 75, .07);
  --ds-radius: 18px;
}

html { scroll-behavior: smooth; }
body {
  background: var(--ds-bg) !important;
  color: var(--ds-ink) !important;
  font-family: Poppins, Helvetica, Arial, sans-serif !important;
}
body.night-mode {
  --ds-bg: #0e1420;
  --ds-card: #151d2b;
  --ds-line: #273247;
  --ds-soft: #1b2a46;
  --ds-ink: #eef4ff;
  --ds-muted: #9eabc0;
  background: var(--ds-bg) !important;
  color: var(--ds-ink) !important;
}

a { color: var(--ds-primary); }
.btn-primary,
.btn-primary:focus,
.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):active {
  background: linear-gradient(135deg, var(--ds-primary), var(--ds-primary-2)) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.btn-primary { border-radius: 11px !important; }
.btn-secondary, .btn-light {
  border-color: var(--ds-line) !important;
  background: var(--ds-card) !important;
  color: var(--ds-ink) !important;
  border-radius: 11px !important;
}

/* ---------- Desktop header ---------- */
.desktop-header {
  height: 70px !important;
  background: rgba(255,255,255,.92) !important;
  border-bottom: 1px solid rgba(224,230,241,.9) !important;
  box-shadow: 0 5px 24px rgba(25,42,70,.06) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
body.night-mode .desktop-header {
  background: rgba(17,25,38,.92) !important;
  border-bottom-color: var(--ds-line) !important;
}
.desktop-header-inner {
  max-width: 1280px !important;
  height: 70px !important;
  padding: 9px 20px !important;
  gap: 24px !important;
}
.desktop-header-left { margin-left: 0 !important; gap: 14px !important; }
.desktop-logo-link { min-width: 130px; }
.desktop-logo-link img { max-height: 42px !important; }
.desktop-logo-text {
  font-size: 29px !important;
  font-weight: 800 !important;
  letter-spacing: -.8px !important;
  background: linear-gradient(135deg,var(--ds-primary),var(--ds-primary-2),var(--ds-accent));
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
.desktop-home-link {
  border: 0 !important;
  background: var(--ds-soft) !important;
  color: var(--ds-primary) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
.desktop-home-link .header-icon,
.desktop-home-link svg,
.desktop-home-link svg * { fill: var(--ds-primary) !important; stroke: var(--ds-primary) !important; }
.desktop-header-search { max-width: 600px !important; }
.desktop-header-search .search-wrapper .form-control {
  height: 44px !important;
  border-radius: 14px !important;
  border: 1px solid transparent !important;
  background: #f0f3f8 !important;
  color: var(--ds-ink) !important;
  transition: .2s ease !important;
}
.desktop-header-search .search-wrapper .form-control:focus {
  background: #fff !important;
  border-color: #bfd0ff !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.09) !important;
}
body.night-mode .desktop-header-search .search-wrapper .form-control { background: #1b2536 !important; }
body.night-mode .desktop-header-search .search-wrapper .form-control:focus { background: #182132 !important; }
.desktop-icon-link {
  width: 42px !important; height: 42px !important;
  border: 1px solid var(--ds-line) !important;
  background: var(--ds-card) !important;
  box-shadow: 0 2px 8px rgba(31,45,75,.05) !important;
}
.desktop-icon-link:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(31,45,75,.09) !important; }
.desktop-icon-link .header-icon,
.desktop-icon-link svg,
.desktop-icon-link svg * { fill: var(--ds-ink) !important; stroke: var(--ds-ink) !important; }
.desktop-icon-link:hover .header-icon,
.desktop-icon-link:hover svg,
.desktop-icon-link:hover svg * { fill: var(--ds-primary) !important; stroke: var(--ds-primary) !important; }
.desktop-icon-link .counter { background: #ef4444 !important; box-shadow: 0 0 0 3px var(--ds-card) !important; }

/* ---------- Global layout ---------- */
.main-wrapper { padding-top: 70px !important; }
.main-wrapper > .container,
.main-wrapper > .container-fluid {
  max-width: 1320px !important;
  padding-top: 16px !important;
  padding-bottom: 36px !important;
}
.main-wrapper .row { --bs-gutter-x: 18px; }
.card,
.x-form,
.create-post,
.x-form.publisher,
.post,
.right-sidebar .card,
.stories-wrapper-container {
  background: var(--ds-card) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius) !important;
  box-shadow: var(--ds-shadow-sm) !important;
}
.card { overflow: hidden; }
.card-header {
  background: transparent !important;
  border-bottom-color: var(--ds-line) !important;
  font-weight: 700 !important;
}

/* ---------- Left navigation / right widgets ---------- */
.sg-offcanvas-sidebar .side-nav,
.sg-offcanvas-sidebar .sidebar,
.sg-offcanvas-sidebar .card {
  border-radius: 16px !important;
}
.sg-offcanvas-sidebar .card,
.right-sidebar .card {
  margin-bottom: 14px !important;
}
.right-sidebar .card-header { padding: 15px 17px !important; }
.right-sidebar .card-body { padding: 15px 17px !important; }
.right-sidebar .feeds-item { border-radius: 12px !important; transition: .18s ease; }
.right-sidebar .feeds-item:hover { background: var(--ds-soft) !important; }
.right-sidebar .btn-custom-add,
.right-sidebar .js_like-page,
.right-sidebar .js_unlike-page {
  background: linear-gradient(135deg,var(--ds-primary),var(--ds-primary-2)) !important;
  border: 0 !important;
  color: #fff !important;
}

/* Existing custom left sidebar, if present in this theme */
.left-sidebar {
  width: 100% !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.menu li,
.menu li.has-submenu {
  color: var(--ds-ink) !important;
  border-radius: 14px !important;
  margin: 2px 0 !important;
  transition: .18s ease !important;
}
.menu li:hover { background: var(--ds-soft) !important; }
.menu li.active,
.menu li.has-submenu.active {
  background: linear-gradient(90deg, rgba(37,99,235,.12), rgba(79,70,229,.05)) !important;
  color: var(--ds-primary) !important;
}
.menu-icon {
  background: #f1f5ff !important;
  color: var(--ds-primary) !important;
  border: 1px solid #e1e9ff !important;
  box-shadow: none !important;
}
.menu li.active .menu-icon,
.menu li.has-submenu.active .menu-icon {
  background: linear-gradient(135deg,var(--ds-primary),var(--ds-primary-2)) !important;
  color: #fff !important;
}

/* ---------- Stories ---------- */
.stories-wrapper-container {
  margin-bottom: 14px !important;
  overflow: hidden !important;
}
.stories-wrapper-container .card-body { padding: 10px 12px 6px !important; }
.stories-wrapper-container #stories > ul.stories,
.stories-wrapper-container .stories {
  gap: 10px !important;
  padding: 4px 2px 8px !important;
}
.story,
.add-story-banner {
  min-width: 116px !important;
  width: 116px !important;
  height: 186px !important;
  border-radius: 16px !important;
  box-shadow: 0 5px 18px rgba(31,45,75,.12) !important;
}
.story:not(.seen) { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--ds-primary), 0 5px 18px rgba(31,45,75,.12) !important; }
.story::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,0) 55%);
  pointer-events: none;
}
.story span.info { z-index: 2 !important; }
.story span.info strong.name { font-size: 12px !important; }
.add-story-pill-red { background: rgba(37,99,235,.82) !important; }
.add-story-pill-red-icon { background: #fff !important; color: var(--ds-primary) !important; border-color: rgba(255,255,255,.9) !important; }
.add-story-pill-red-text { color: #fff !important; }
.stories-nav { background: var(--ds-primary) !important; box-shadow: 0 5px 16px rgba(37,99,235,.28) !important; }
.stories-nav:hover { background: var(--ds-primary-2) !important; }

/* ---------- Publisher ---------- */
.dummy-publisher-card,
.create-post,
.x-form.publisher { border-radius: 18px !important; }
.dummy-publisher-top { padding: 13px 16px 12px 68px !important; }
.dummy-publisher-input {
  background: #f1f4f9 !important;
  color: #7a8496 !important;
  border: 1px solid transparent !important;
  padding: 12px 16px !important;
  border-radius: 14px !important;
}
.dummy-publisher-trigger:hover .dummy-publisher-input { background: #ebf1ff !important; }
.dummy-publisher-actions { border-top-color: var(--ds-line) !important; padding: 6px 9px !important; }
.dummy-publisher-btn { border-radius: 10px !important; color: var(--ds-muted) !important; }
.dummy-publisher-trigger:hover .dummy-publisher-btn { background: var(--ds-soft) !important; }
.dummy-publisher-btn .dummy-pub-icon,
.dummy-publisher-btn .dummy-pub-icon * { color: var(--ds-primary) !important; fill: var(--ds-primary) !important; }

/* ---------- Feed tabs ---------- */
.ftabs-wrapper {
  background: var(--ds-card) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--ds-shadow-sm) !important;
  padding: 5px !important;
}
.ftabs-item { border-radius: 12px !important; color: var(--ds-muted) !important; }
.ftabs-item:hover { background: var(--ds-soft) !important; }
.ftabs-item.active {
  color: var(--ds-primary) !important;
  background: linear-gradient(135deg,rgba(37,99,235,.12),rgba(79,70,229,.07)) !important;
}

/* ---------- Posts ---------- */
.post {
  margin-bottom: 14px !important;
  border-radius: 18px !important;
  box-shadow: var(--ds-shadow-sm) !important;
}
.post:hover { box-shadow: var(--ds-shadow) !important; }
.post-body { padding: 16px 16px 0 !important; }
.post-header { gap: 12px !important; }
.post-avatar-picture { box-shadow: 0 0 0 2px var(--ds-card), 0 0 0 3px #d7e4ff !important; }
.post-author, .post .post-author, a.post-author, .post a.post-author { color: var(--ds-ink) !important; font-weight: 700 !important; }
.post-title, .post-time, .post-time a { color: var(--ds-muted) !important; }
.post-text { color: var(--ds-ink) !important; font-size: 15px !important; line-height: 1.5 !important; }
.post-content img,
.post-media img,
.post-photo img { border-radius: 14px !important; }
.post-stats { border-top-color: var(--ds-line) !important; color: var(--ds-muted) !important; }
.post-actions,
.post .post-actions { border-top: 0 !important; }
.post-actions .btn,
.post-actions > * {
  border-radius: 11px !important;
  transition: .18s ease !important;
}
.post-actions .btn:hover,
.post-actions > *:hover { background: var(--ds-soft) !important; color: var(--ds-primary) !important; }
.post-meta .dropdown-toggle { background: #f2f5fa !important; color: var(--ds-muted) !important; }
.post-meta .dropdown-toggle:hover { background: var(--ds-soft) !important; color: var(--ds-primary) !important; }

/* ---------- Forms, modals, search, dropdowns ---------- */
.form-control,
.form-select,
.input-group-text,
textarea {
  border-color: var(--ds-line) !important;
  background: var(--ds-card) !important;
  color: var(--ds-ink) !important;
  border-radius: 12px !important;
}
.form-control:focus,
.form-select:focus,
textarea:focus {
  border-color: #b8cbff !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.09) !important;
}
.dropdown-menu {
  border: 1px solid var(--ds-line) !important;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(21,35,60,.15) !important;
  background: var(--ds-card) !important;
}
.dropdown-item { color: var(--ds-ink) !important; border-radius: 9px !important; margin: 2px 6px; width: auto; }
.dropdown-item:hover { background: var(--ds-soft) !important; color: var(--ds-primary) !important; }
.modal-content {
  border: 1px solid var(--ds-line) !important;
  border-radius: 20px !important;
  overflow: hidden;
  box-shadow: 0 25px 70px rgba(15,30,60,.22) !important;
}
.modal-header, .modal-footer { border-color: var(--ds-line) !important; }

/* ---------- Profile / directory / generic content cards ---------- */
.profile-cover, .profile-avatar, .profile-info,
.people-list, .directory-card, .package-card,
.list-group-item {
  border-color: var(--ds-line) !important;
}
.list-group-item { background: var(--ds-card) !important; }
.nav-tabs { border-bottom-color: var(--ds-line) !important; }
.nav-tabs .nav-link { color: var(--ds-muted) !important; border-radius: 10px 10px 0 0 !important; }
.nav-tabs .nav-link.active { color: var(--ds-primary) !important; border-color: var(--ds-line) var(--ds-line) var(--ds-card) !important; }
.badge.text-bg-primary, .badge.bg-primary { background: var(--ds-primary) !important; }

/* ---------- Alerts / empty states ---------- */
.alert { border-radius: 14px !important; border: 1px solid var(--ds-line) !important; }

/* ---------- Mobile header ---------- */
@media (max-width: 767.98px) {
  body { padding-bottom: 82px !important; }
  .main-wrapper { padding-top: 0 !important; }
  .main-wrapper > .container,
  .main-wrapper > .container-fluid {
    padding: 9px 10px 24px !important;
  }
  .mobile-header {
    min-height: 58px !important;
    padding: 9px 11px !important;
    background: rgba(255,255,255,.94) !important;
    border-bottom: 1px solid var(--ds-line) !important;
    box-shadow: 0 4px 18px rgba(31,45,75,.07) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }
  body.night-mode .mobile-header { background: rgba(17,25,38,.94) !important; }
  .mobile-logo { color: var(--ds-primary) !important; font-size: 24px !important; font-weight: 800 !important; }
  .mobile-menu-icon { border-radius: 11px !important; }
  .mobile-menu-icon:hover { background: var(--ds-soft) !important; }
  .mobile-menu-icon .header-icon,
  .mobile-menu-icon svg,
  .mobile-menu-icon svg * { fill: var(--ds-ink) !important; stroke: var(--ds-ink) !important; }
  .mobile-icon-link {
    width: 36px !important; height: 36px !important;
    background: var(--ds-card) !important;
    border-color: var(--ds-line) !important;
  }
  .mobile-icon-link .header-icon,
  .mobile-icon-link svg,
  .mobile-icon-link svg * { fill: var(--ds-ink) !important; stroke: var(--ds-ink) !important; }
  .mobile-icon-link:hover .header-icon,
  .mobile-icon-link:hover svg,
  .mobile-icon-link:hover svg * { fill: var(--ds-primary) !important; stroke: var(--ds-primary) !important; }
  .mobile-profile-link img { border: 2px solid var(--ds-primary) !important; }

  .sg-offcanvas-mainbar > .row { display: block !important; }
  .middle-feed { width: 100% !important; }
  .sg-offcanvas-sidebar { width: 100% !important; }
  .right-sidebar { display: none !important; }
  .stories-wrapper-container { border-radius: 17px !important; }
  .story, .add-story-banner { width: 105px !important; min-width: 105px !important; height: 168px !important; border-radius: 15px !important; }
  .post { border-radius: 16px !important; }
  .post-body { padding: 14px 13px 0 !important; }
  .post-text { font-size: 15px !important; }
  .post-stats { margin-inline: 13px !important; }
  .dummy-publisher-top { padding: 11px 12px 10px 61px !important; }
  .dummy-pub-avatar { left: 12px !important; width: 38px !important; height: 38px !important; }
  .dummy-publisher-input { padding: 10px 13px !important; font-size: 14px !important; }
  .dummy-publisher-actions { padding: 5px 6px !important; }
  .dummy-publisher-btn { font-size: 12px !important; gap: 5px !important; padding: 8px 5px !important; }

  /* Bottom navigation: always pinned to the bottom and clear of Android safe area. */
  .footer-bottom-bar {
    position: fixed !important;
    inset-inline: 0 !important;
    bottom: 0 !important;
    height: calc(66px + env(safe-area-inset-bottom)) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    z-index: 10050 !important;
    background: rgba(255,255,255,.96) !important;
    border-top: 1px solid var(--ds-line) !important;
    box-shadow: 0 -8px 28px rgba(31,45,75,.10) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }
  body.night-mode .footer-bottom-bar { background: rgba(17,25,38,.96) !important; }
  .footer-bottom-bar-links {
    height: 66px !important;
    gap: 2px !important;
    align-items: stretch !important;
    padding: 4px 5px !important;
  }
  .footer-bottom-bar-links > .link { height: 58px !important; }
  .footer-bottom-bar-links > .link > a {
    height: 58px !important;
    padding: 5px 4px !important;
    border-radius: 13px !important;
    gap: 3px !important;
  }
  .footer-bottom-bar-links > .link > a .header-icon {
    width: 22px !important; height: 22px !important;
    padding: 4px !important;
    border-radius: 9px !important;
    background: transparent !important;
  }
  .footer-bottom-bar-links > .link > a .header-icon,
  .footer-bottom-bar-links > .link > a .header-icon * { color: #7a8496 !important; fill: #7a8496 !important; }
  .footer-bottom-bar-links > .link.active > a .header-icon,
  .footer-bottom-bar-links > .link.active > a .header-icon * {
    color: #fff !important; fill: #fff !important;
    background: linear-gradient(135deg,var(--ds-primary),var(--ds-primary-2)) !important;
    box-shadow: 0 5px 13px rgba(37,99,235,.28) !important;
  }
  .footer-bottom-bar-links .link > a > .title { font-size: 10px !important; line-height: 11px !important; color: #7a8496 !important; }
  .footer-bottom-bar-links > .link.active > a > .title { color: var(--ds-primary) !important; font-weight: 700 !important; }
  .footer-bottom-bar .link.active::after { background: var(--ds-primary) !important; bottom: 1px !important; }
  .footer-bottom-bar-links > .footer-fab-link > a.dropdown {
    top: -20px !important;
    width: 50px !important; height: 50px !important;
    background: linear-gradient(135deg,var(--ds-primary),var(--ds-primary-2)) !important;
    box-shadow: 0 8px 22px rgba(37,99,235,.30), 0 0 0 4px var(--ds-card) !important;
  }
  .footer-bottom-bar-links > .footer-fab-link > a.dropdown .header-icon,
  .footer-bottom-bar-links > .footer-fab-link > a.dropdown .header-icon * { background: transparent !important; color: #fff !important; fill: #fff !important; }
  .footer-bottom-bar-links > .footer-fab-link > a.dropdown .title { color: var(--ds-primary) !important; }
}

@media (min-width: 768px) {
  body { padding-bottom: 0 !important; }
}

/* ---------- Small-screen polish ---------- */
@media (max-width: 420px) {
  .footer-bottom-bar-links > .link > a { padding-inline: 1px !important; }
  .footer-bottom-bar-links .link > a > .title { font-size: 9px !important; }
  .story, .add-story-banner { width: 99px !important; min-width: 99px !important; height: 160px !important; }
}

/* ---------- Dark mode consistency ---------- */
body.night-mode .dummy-publisher-input,
body.night-mode .desktop-header-search .search-wrapper .form-control { color: var(--ds-ink) !important; }
body.night-mode .dummy-publisher-input { background: #1b2536 !important; }
body.night-mode .menu-icon { background: #1b2a46 !important; border-color: #2b3b59 !important; }
body.night-mode .post-meta .dropdown-toggle { background: #1c2637 !important; }

/* ---------- Reduce motion for accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}